<template>
  <div>
    <ve-histogram
      v-if="type=='histogram'"
      :data="chart.data"
      :data-empty="chart.data.rows.length==0"
      :extend="chart.extend"
      :settings="chart.settings"
      :height="chart.config.height"
    ></ve-histogram>
    <ve-bar
      v-if="type=='bar'"
      :data="chart.data"
      :data-empty="chart.data.rows.length==0"
      :extend="chart.extend"
      :settings="chart.settings"
      :height="chart.config.height"
    ></ve-bar>
    <ve-line
      v-if="type=='line'"
      :data="chart.data"
      :data-empty="chart.data.rows.length==0"
      :extend="chart.extend"
      :settings="chart.settings"
      :height="chart.config.height"
    ></ve-line>
    <ve-scatter
      v-if="type=='scatter'"
      :data="chart.data"
      :data-empty="chart.data.rows.length==0"
      :extend="chart.extend"
      :settings="chart.settings"
      :height="chart.config.height"
    ></ve-scatter>
  </div>
</template>

<script>
export default {
  props: ["source", "config"],
  data() {
    return {
      isReady: false,
      chart: {
        settings: {
          roseType: "radius"
        },
        extend: {
          // title: { text: this.config.title },
          series: {
            label: {
              show: true,
              position: "top",
              formatter: "{a}: {c}"
            }
          }
        },
        data: {
          columns: [],
          rows: []
        },
        config: {
          height: "500px"
        }
      }
    };
  },
  computed: {
    type() {
      return this.config.type;
    }
  },
  methods: {
    setChart() {
      if (this.type == "bar") {
        this.chart.extend.series.label.position = "right";
      }
      if (this.type == "line") {
        this.chart.extend.series["type"] = "line";
        delete this.chart.extend.series.label["formatter"];
      }
      if (this.type == "scatter") {
        delete this.chart.extend.series.label["formatter"];
      }
    },
    fetchData() {
      let source = this.source;
      let config = this.config;
      let columns = [];
      let rows = [];
      let filter = {
        keyword: config.filter.keyword,
        values: config.filter.value.split(" ")
      };
      // date range round
      for (let i = 0; i < this.config.timeRange.length; i++) {
        // fetch data
        let line = {};
        let minTime = new Date(this.config.timeRange[i].min);
        let maxTime = new Date(this.config.timeRange[i].max);
        let label =
          "" +
          minTime.getFullYear() +
          "/" +
          (minTime.getMonth() + 1) +
          "/" +
          minTime.getDate() +
          " ~\n" +
          maxTime.getFullYear() +
          "/" +
          (maxTime.getMonth() + 1) +
          "/" +
          maxTime.getDate() +
          "";
        line["日期"] = label;
        for (let j = 0; j < source.length; j++) {
          let sourceTime = new Date(source[j].begin.replace(/-/g, "/"));
          // Time Range
          if (
            sourceTime.getTime() >= this.config.timeRange[i].min &&
            sourceTime.getTime() <= this.config.timeRange[i].max
          ) {
            // Filter
            if (
              filter.values.length === 0 ||
              config.filter.keyword === "" ||
              filter.values.indexOf(source[j][config.filter.keyword]) > -1
            ) {
              if (columns.indexOf(source[j][config.keyword]) === -1) {
                columns.push(source[j][config.keyword]);
              }
              if (!line[source[j][config.keyword]]) {
                line[source[j][config.keyword]] = 0;
              }
              if (config.summary) {
                line[source[j][config.keyword]] += +source[j].value;
              } else {
                line[source[j][config.keyword]]++;
              }
            }
          }
        }
        rows.push(line);
      }
      columns.sort();
      columns.splice(0, 0, "日期");
      this.chart.data.columns = columns;
      this.chart.data.rows = rows;
      // console.log(JSON.stringify(this.chart.data));
      this.$nextTick(() => {
        this.isReady = true;
      });
    }
  },
  mounted() {
    this.setChart();
    this.fetchData();
  }
};
</script>